<template lang="pug">
    span(:class="{'control-amount-working': working}") {{model.value.value | fixed}}
</template>

<script>
    export default {
        name: "control-amount",
        props: {
            model: {
                type: Object,
                default() {
                    return {
                        value: {name: "", value},
                        amount: 0,
                        name: "无标题",
                        unit: "U",
                        max: 0,
                        min: 0,
                        increment: 1
                    };
                }
            },
            working: {type: Boolean, default: false}
        },
        model: {event: "update", prop: "model"},
        methods: {
            up() {
                if (this.model.value.value < this.model.min) {
                    this.model.value = {value: this.model.min, name: this.model.min};
                    return;
                }
                var value =
                    this.model.value.value == this.model.max
                        ? this.model.min
                        : (this.model.value.value * 10 + this.model.increment * 10) / 10;
                this.model.value = {value, value, name: value};

                if (this.model.onChange) this.model.onChange(this.model);
            },
            down() {
                var value =
                    this.model.value.value <= this.model.min
                        ? this.model.max
                        : (this.model.value.value * 10 - this.model.increment * 10) / 10;
                this.model.value = {value, value, name: value};

                if (this.model.onChange) this.model.onChange(this.model);
            }
        },
        filters:{
            fixed(val){
                if(parseInt(val) < 10) return "0" + val;
                return val;
            }
        }
    };
</script>
